<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Click me!</title>
<style> 
	body, button { margin: 10px; } 
	div { padding: 10px; }
</style>
<script>

/*
//
// The version without the closure...
//
var count = 0;
window.onload = function() {
	var button = document.getElementById("clickme");
	button.onclick = handleClick;
};

function handleClick() {
	var message = "You clicked me ";
	var div = document.getElementById("message");
	count++;
	div.innerHTML = message + count + " times!";
}
*/

//
// The version with the closure.
//
window.onload = function() {
	var count = 0; 
	var message = "You clicked me ";
	var div = document.getElementById("message");

	var button = document.getElementById("clickme");
	button.onclick = function() {
		count++;
		div.innerHTML = message + count + " times!";
	};
};

</script> 
</head> 
<body>
	<button id="clickme">Click me!</button>
	<div id="message"></div>
</body>
</html>

